<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body{
			margin:0; 
			padding:0; 
			height:100%; 
			width: 100%;
		}
		#wrapper{
			background:#ddd;
			display:grid;
		}
		#mapdiv{
			margin:0; 
			padding:0;
			grid-row: 1 / 3;
		}
    </style>
	<!-- Change the name of the webpage into each city. -->
    <title>London</title>
	<script>

	function back(){
		if(index === 1){
            document.getElementById("content1")
                    .style.display= "";
            document.getElementById("photo1")
                    .style.display= "";
            document.getElementById("content2")
                    .style.display= "none";
            document.getElementById("photo2")
                    .style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index++;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
			map.setCenter(lonLat2, zoom2);
			index = 1;
	}}
	
	<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function forward(){
		if(index === 1){
			document.getElementById("content1")
					.style.display= "";
			document.getElementById("photo1")
					.style.display= "";
			document.getElementById("content2")
					.style.display= "none";
			document.getElementById("photo2")
					.style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index = 2;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
            map.setCenter(lonLat2, zoom2);
			index--;
		}
	}
	</script>
</head>

<body bgcolor="#362619">

<table id ="top" width=100% height="110px" align="center" cellpadding="0" cellspacing="0" style="background:#362619">
  <tbody>
  <tr height=5%>
  </tr>
  <tr height=40%>
	<!-- Change the name of the headline of each city. -->
	<!-- p.s. "&nbsp;" means space here. -->
  	<td colspan="2" style="size:5px;color:#FFFFFF;font-family:lucida calligraphy;">&nbsp;&nbsp;London</td>
  </tr>
  <tr height=30%>
	<!-- Change the name of the brief introduction of each city. -->
	<td colspan="2" style="size:2px;color:#C5D5D5;font-family:lucida calligraphy;">&nbsp;&nbsp;&nbsp;This is where Phileas Fogg departed.</td>
  </tr>
  <tr height=25%>
    <!-- Link the corresponding webpage address after "href=" --> <!-- This part should be finished by Jiazhe at last. -->
	<th width="77%"></th>
	<th width="8%" style="text-align:center"><a id="link1" href="NewYork.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> LAST STOP </a></th>
	<th width="8%" style="text-align:center"><a id="link2" href="Suez.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> NEXT STOP </a></th>
	<th width="7%" style="text-align:center"><a id="link3" href="../Main%20page.html  " style="size:2px;color:#C5D5D5;font-family:Calibri;">  RETURN  </a></th>
  </tr>
</table>

<div id="wrapper">
<div id="mapdiv" style="margin:0px; padding:0; background:#3E3D35; float:left; height:720px; width:100%; position:relative"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
<script>
        map = new OpenLayers.Map("mapdiv");
        map.addLayer(new OpenLayers.Layer.OSM());

        //Set start centre point and zoom
		//For Suez, the first and final point is (32.446568, 30.593634), shift the center lonlat a little bit to show the kml point on the left.
        var lonLat1 = new OpenLayers.LonLat(0.182083, 51.502023444)
            .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
        var zoom1=13;
        
		//Set the second centre point and zoom
		var lonLat2 = new OpenLayers.LonLat(-0.094520, 51.51004)
				.transform(
					new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
					map.getProjectionObject() // to Spherical Mercator Projection
				);
		var zoom2=14;
		

		map.setCenter(lonLat1, zoom1);
		
		var kmllayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./kml/London.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });
        
		map.addLayer(kmllayer); 

		var index = 2;
	
</script>

<div align="center" id="photoShow" style="margin:0; padding:0; background:#3E3D35; float:left; height:450px; width:700px; position:absolute;top:135px;left:900px;">
    <button id="back" style="width:58px; height:89px; background:url(./icon/1.png); float:right; position:absolute; top:43%; margin-top:1px; left:1%; margin-left:1px; border:none" onclick="back();"></button>
    <button id="forward" style="width:58px; height:89px; background:url(./icon/2.png); float:right; position:absolute; top:43%; margin-top:1px; right:1%; margin-right:1px; border:none" onclick="forward();"></button>
    <!--Change the src of each scenic spot. -->
	<img id="photo1" src="./Photo/River Thames.jpg" style="width:700px;">
	<img id="photo2" src="./Photo/London Piccadilly Circus.jpg" style="width:700px; display: none;">
</div>


<!-- Change the table height and to adjust the text window. -->
<table id ="content1" width="700px" height="240px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px;" >
  <tbody>
  <tr height="5px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="140px" style="size:3px;color:#FFFFFF;font-family:Arial;">River Thames</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">The River Thames, flowing through southern England including London, is the longest river entirely in England and the second-longest in the United Kingdom. </br></br>
        Most of London's main buildings are located on both sides of the Thames River, especially those with a history of hundreds of years. Upstream along the Thames River there are many places of interest, such as Eaton, Oxford, Henry and Windsor, while the estuary is full of busy British merchant ships. </br></br>
        Wherever Thames River flows through, it is the essence of British culture. Perhaps it can be said that Thames River has nurtured a brilliant England civilization.</td>
    <td width="10px"></td>
  </tr>
</table>



<!-- Change the table height and to adjust the text window. -->
<table id ="content2" width="700px" height="220px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px; display: none;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;">London Piccadilly Circus</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">Piccadilly Circus is one of London's most popular tourist destinations, built in 1819 by John Nash to connect Regent Street and Piccadilly District.  </br></br>
        This busy intersection is centered on the sculpture of the God of love, Eros. From this location, you can easily walk to Piccadilly, Leicester Square, Shaftesbury Avenue or Regent Street.</br></br>
        Nowadays at night, Piccadilly Circus is surrounded by countless flashing neon billboards and LED displays, full of lively atmosphere.</td>
    <td width="10px"></td>
  </tr>
</table>


</div>

</body>
</html>